<template>
<div style="text-align: center">

  <h1>
    <el-avatar :src="storeData.img" style="vertical-align: bottom"></el-avatar>
    {{storeData.name}}</h1>

  <el-image
      v-for="img in tt(this.storeData.imglist)"
      style="width: 150px; height: 150px;margin: 10px;
      border-radius: 10px;box-shadow: 0 6px 10px rgba(0, 0, 0, .12), 0 0 15px rgba(0, 0, 0, .04)"
      :src="img"
  ></el-image>
  <el-row>
    <el-col :span="8":offset="8">
      <el-col :span="8">店铺等级：{{storeData.level}}</el-col>
      <el-col :span="8">店铺关注：{{storeData.follow}}</el-col>
      <el-col :span="8">店铺浏览量：{{storeData.see}}</el-col>
    </el-col>
  </el-row>
  <p>店铺简介：{{storeData.content}}</p>
  <p>店铺标签：{{storeData.tag}}</p>
  <p>联系人：{{storeData.user}}
    <span style="margin-left: 20px">联系电话：</span>{{storeData.mobile}}</p>
  <p>可提现收益：{{storeData.withdrawalProfit}}
    冻结收益：{{storeData.frozenProfit}}
    历史收益：{{storeData.totalProfit}}</p>
  <p>营业时间：{{storeData.startTime}} 到 {{storeData.endTime}} </p>
  <p>营业状态：{{zt()}}</p>
  <p>店铺区域：{{storeData.saddress}}</p>
  <p>详细地址：{{storeData.address}}</p>
  <p>店铺运费：{{storeData.transportFee}}</p>
  <el-button type="primary" round @click="xg">修改店铺信息</el-button>
  <el-dialog
      :visible.sync="alter"
      width="30%"
      :before-close="alterClose"
      style="text-align: center"
  >
    <el-form label-width="80px" :model="alterData">
      <el-form-item label="店铺名称">
      <el-input v-model="alterData.name"></el-input>
    </el-form-item>
      <el-form-item label="店铺图标">
        <el-upload
            class="avatar-uploader"
            action="http://8.136.105.10:8081/putImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            style="text-align: left"
        >
          <img  :src="alterData.img" class="avatar" style="width: 100px;height: 100px">
        </el-upload>
      </el-form-item>
      <el-form-item label="店铺图片">
        <el-row>
          <el-col :span="8">
        <el-upload
            class="avatar-uploader"
            action="http://8.136.105.10:8081/putImg"
            :show-file-list="false"
            :on-success="handleSuccess0"
            >
          <img  :src="imgList[0]" class="avatar" style="width: 100px;height: 100px">
        </el-upload>
          </el-col >
          <el-col :span="8">
        <el-upload
            class="avatar-uploader"
            action="http://8.136.105.10:8081/putImg"
            :show-file-list="false"
            :on-success="handleSuccess1"
        >
          <img  :src="imgList[1]" class="avatar" style="width: 100px;height: 100px">
        </el-upload>
          </el-col >
          <el-col :span="8">
        <el-upload
            class="avatar-uploader"
            action="http://8.136.105.10:8081/putImg"
            :show-file-list="false"
            :on-success="handleSuccess2"
        >
          <img  :src="imgList[2]" class="avatar" style="width: 100px;height: 100px">
        </el-upload>
          </el-col>
        </el-row>
    </el-form-item>
      <el-form-item label="店铺简介">
        <el-input v-model="alterData.content"></el-input>
      </el-form-item>
      <el-form-item label="店铺标签">
        <el-input v-model="alterData.tag"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="alterData.user"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="alterData.mobile"></el-input>
      </el-form-item>
      <el-form-item label="运费">
        <el-input v-model="alterData.transportFee"></el-input>
      </el-form-item>
      <el-form-item label="区域地址">
        <el-input v-model="alterData.saddress"></el-input>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="alterData.address"></el-input>
      </el-form-item>
      <el-form-item label="开店时间">
        <el-input v-model="alterData.startTime"></el-input>
      </el-form-item>
      <el-form-item label="关店时间">
        <el-input v-model="alterData.endTime"></el-input>
      </el-form-item>
      <el-form-item label="营业状态">
        <el-radio-group v-model="alterData.status">
          <el-radio :label="0" disabled>申请中</el-radio>
          <el-radio :label="1" >正常营业</el-radio>
          <el-radio :label="-1">店铺休息</el-radio>
          <el-radio :label="-2">店铺关闭</el-radio>
        </el-radio-group>
      </el-form-item></el-form>
      <el-button type="primary" plain
                 style="width: 150px;height: 50px ;font-size: 25px;"
                 @click="alters">确定修改</el-button>

  </el-dialog>



</div>
</template>

<script>
import as from "@/axios/axios";

export default {
  name: "Details",
  created() {
    this.getStore()
  },
  data(){
    return {
      storeData:{},
      alterData:{},
      alter:false,
      imgList:[]
    }
  },
  methods:{

    tt(string){
      return eval(string)
    },

    getStore(){
      as.post("/store/getId",{id:localStorage.getItem("storeId")}).then((res)=>{
        console.log(res)
        this.storeData = res.data.data
      })
    },
    //状态
    zt(){
      if(this.storeData.status == 0){
        return "申请中"
      }else if(this.storeData.status == 1 ){
        return "营业中"
      }else if(this.storeData.status == -1){
        return "休息中"
      }else if(this.storeData.status ==-1){
        return "店铺关闭"
      }
    },
    //修改
    xg(){
      this.alterData = {...this.storeData}
      this.imgList = this.tt(this.storeData.imglist)
      console.log(this.imgList)
      this.alter =true
    },
    // 关闭修改
    alterClose(done){
      this.alterData = {}
      done()
    },
    //确定修改
    alters(){
      this.alterData.imglist = JSON.stringify(this.imgList)
      as.post("/store/alters",this.alterData).then((res)=>{
        this.alterData = {}
        this.alter =false
        this.getStore()
      })

    },
    //头像请求成功
    handleAvatarSuccess(res, file) {
      this.alterData.img = res.name;
    },
    handleSuccess0(res, file) {
      this.$set(this.imgList,0,res.name)
    },
    handleSuccess1(res, file) {
      this.$set(this.imgList,1,res.name)
    },
    handleSuccess2(res, file) {
      this.$set(this.imgList,2,res.name)
    },

    //成功
    handleSuccess(res,file,fileList){
      console.log("成功后")
      console.log(res)
      console.log(this.getUrl(file))
      console.log(this.getListUrl(fileList))
      console.log("===========================")
    },
    //失败
    handleError(res,file,fileList){
      console.log("失败")
      console.log("===========================")
    },
    //删除
    handleRemove(file, fileList) {
      console.log("删除时")
      this.uploadFileList = fileList
      console.log(file)
      console.log(fileList)
      console.log("==============")
    },
    //详情
    handlePreview(file) {
      console.log("详情")
      this.dialogImageUrl = file.url;
      console.log(file)
      this.dialogVisible = true;
    },
    //获取上传图片的url
    getUrl(file){
      return file.response.name
    },
    //获取上传图片数组的url 字符串
    getListUrl(fileList){
      let list = []
      for(let file of fileList){
        list.push(file.response.name)
      }
      return list
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 4px dashed #000000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>